<template>
	<view class="car">
		<!-- #ifndef MP-WEIXIN -->
		<uniNavBar fixed="true" status-bar="true" title="我的足迹" left-icon="back" @clickLeft="goBack()">
			<view class="nav-right" v-if="hidden" @click="hidden=false" slot="right">编辑</view>
			<view class="nav-right" v-if="!hidden" @click="hidden=true" slot="right">完成</view>
		</uniNavBar>
		<!-- #endif -->
		<!-- #ifdef MP-WEIXIN -->
		<view class="btn-box">
			<view class="nav-right" v-if="hidden" @click="hidden=false" slot="right">编辑</view>
			<view class="nav-right" v-if="!hidden" @click="hidden=true" slot="right">完成</view>
		</view>
		<!-- #endif -->
		<view class="box" v-for="(item,index) in dataList" :key="index">
			<view class="top_box">
				<view style="width: 50rpx;" v-if="!hidden"></view>
				<h3>{{item['date']['date_txt']}}</h3>
				<view class="border" :class="{'pading_right':hidden}"></view>
			</view>
			<view v-for="(order,index2) in item.goods_list" :key="index2" class="border-box">
				<view class="left_box">
					<view v-if="hidden" style="width: 20rpx;"></view>
					<image @click="check(index,index2,order.goods_id)" v-if="!checkList[index][index2]&&!hidden"
						class="top_left_image" src="@/static/images/address_check_no.png" mode=""></image>
					<image @click="check(index,index2,order.goods_id)" v-if="checkList[index][index2]&&!hidden"
						class="top_left_image" src="@/static/images/login/xuanzhong-icon.png"></image>
					<view class="flex">
						<navigator :url="'/mall/goods/info?goods_id='+order.goods_id">
							<image class="top_left_center" :src="order.goods_image" mode="" style=""></image>
						</navigator>
						<view class="item_left" :class="{width:hidden}">
							<navigator :url="'/mall/goods/info?goods_id='+order.goods_id">
								<h4 class="ellipsis">{{order.goods_name}}</h4>
							</navigator>
							<view class="shearp">
								<view class="money">¥ <text>{{order.goods_promotion_price}}</text></view>
								<view class="flex_center" v-if="hidden">
									<!-- <text class="look" @click="look(order.goods_id)">看相似</text> -->
									<image @click="delOne(index,index2,order)" style=""
										src="../static/images/item09.jpg" mode=""></image>
								</view>
							</view>

						</view>
					</view>
				</view>
				<view class="boder"></view>
			</view>

		</view>
		<view v-if="isBlank<=0" class="None">
			<image style="width: 100%;" :src="`${picUrl}/InfoNull.png`" mode="widthFix"></image>
		</view>
		<view class="bootom" v-if="!hidden">
			<view class="bootom_left" @click="ctrl()">
				<image v-if="!flag" class="top_left_image" style="margin-top: 34rpx;"
					src="@/static/images/address_check_no.png" mode=""></image>
				<image v-else class="top_left_image" style="margin-top: 34rpx;"
					src="@/static/images/login/xuanzhong-icon.png"></image>
				<text>全选</text>
			</view>
			<view class="bootom_right" @click="del">
				删除
			</view>
		</view>
		<!-- 填充 -->
		<!-- 		<view style="height: 200rpx;"></view> -->
		<go-top :isShow='isShow'></go-top>
	</view>
</template>

<script>
	import uniNavBar from '@/components/uni-nav-bar/uni-nav-bar.vue'
	import goTop from '@/components/go-top/go-top.vue'
	export default {
		components: {
			uniNavBar,
			goTop
		},
		data() {
			return {
				dataList: [],
				flag: false,
				hidden: true,
				checkList: [],
				goods_id: [],
				typeList: [],
				curpage: 1,
				is_applet: false,
				isShow: false, //返回顶部火箭头
				hasmore: false, //判断翻页
				isBlank: 1 //判断空白页
			}
		},
		created() {
			this.isWeiXin()
		},
		onLoad() {
			this.getMark()
		},
		onPageScroll(res) {
			if (res.scrollTop > 200) {
				this.isShow = true
			} else {
				this.isShow = false
			}
		},
		onReachBottom() {
			if (this.hasmore) {
				this.getMark(true)
			} else {
				uni.showToast({
					title: '已全部加载',
					icon: 'none'
				});
			}
		},
		// onBackPress() {
		// 	// #ifdef H5
		// 	history.back()
		// 	return true;
		// 	// #endif
		// },
		onUnload() {

		},
		methods: {

			//判断是不是微信小程序
			isWeiXin() {
				// #ifdef MP-WEIXIN
				this.is_applet = true
				// #endif
			},
			//获取浏览记录
			getMark(page = false) {
				this.$util.request({
					url: '/mobile/index.php?act=member_goodsbrowse&op=list_new',
					method: 'get',
					data: {
						curpage: this.curpage
					}
				}).then(res => {
					if (res.error_code == 0) {
						this.hasmore = res.datas.hasmore
						if (this.hasmore) {
							this.curpage++
						}
						if (!page) {
							this.checkList = []
							this.dataList = []
							this.dataList = res.datas.list
							for (let i = 0; i < this.dataList.length; i++) {
								//翻转数据按最新的排序
								// this.dataList[i].goods_list.reverse()
								this.checkList.push([])
								for (let j = 0; j < this.dataList[i].goods_list.length; j++) {
									this.checkList[i].push(false)
								}
							}
						} else {
							let list = res.datas.list
							for (let j = 0; j < this.list[i].goods_list.length; j++) {
								this.checkList[i].push(false)
							}
							this.dataList = this.dataList.concat(list)
						}
					} else {
						uni.showToast({
							title: res.message,
							icon: 'none'
						});
					}
					this.isBlank = this.dataList.length
				})
			},
			look(goods_id) { //看相似
				uni.navigateTo({
					url: "/mall/goods/info?goods_id=" + goods_id
				})
			},

			//全部清空
			empty() {
				uni.showModal({
					title: '提示',
					content: '确定清除浏览记录？',
					success: (res) => {
						if (res.confirm) {
							this.$util.request({
								url: '/mobile/index.php?act=member_goodsbrowse&op=del',
								method: 'POST',
								data: {}
							}).then(res => {
								console.log(res)
								if (res.datas == '1') {
									uni.showToast({
										title: '删除成功！'
									})
									this.getMark()
								}
							})
						}
					}
				})
			},
			//单个删除
			delOne(x, y, item) {
				uni.showModal({
					title: '提示',
					content: '确定删除当前记录？',
					success: (res) => {
						if (res.confirm) {
							this.$util.request({
								url: '/mobile/index.php?act=member_goodsbrowse&op=del_one',
								method: 'POST',
								data: {
									goods_id: item.goods_id
								}
							}).then(res => {
								if (res.datas == '1') {
									uni.showToast({
										title: '删除成功！'
									})
									this.getMark()
								}
							})

						}
					}
				})
			},

			//返回
			goBack() {
				uni.navigateBack()
			},
			// 单选
			check(x, y, id) {
				if (this.goods_id.length > 0) {
					//删除的数组
					let lt = true
					for (let i = 0; i < this.goods_id.length; i++) {
						if (this.goods_id[i] == id) {
							lt = false
							this.goods_id.splice(i, 1)
						}
					}
					if (lt) {
						this.goods_id.push(id)
					}
				} else {
					this.goods_id.push(id)
				}
				this.checkList[x].splice(y, 1, !this.checkList[x][y])
				let count = true;
				for (let i = 0; i < this.dataList.length; i++) {
					for (let j = 0; j < this.dataList[i].goods_list.length; j++) {
						if (!this.checkList[i][j]) {
							this.flag = false
							return count = false
						}
					}
				}
				if (count) {
					this.flag = true
				}
			},
			ctrl() {
				if (this.flag) {
					for (let i = 0; i < this.dataList.length; i++) {
						for (let j = 0; j < this.dataList[i].goods_list.length; j++) {
							this.checkList[i].splice(j, 1, false)
							this.goods_id = []
						}
					}
					console.log(this.goods_id)
				} else {
					for (let i = 0; i < this.dataList.length; i++) {
						for (let j = 0; j < this.dataList[i].goods_list.length; j++) {
							this.checkList[i].splice(j, 1, true)
							this.goods_id.push(this.dataList[i].goods_list[j].goods_id)
						}
					}
					console.log(this.goods_id)
				}
				this.flag = !this.flag
			},
			//多个删除
			del() {
				let id = this.goods_id.join(',')
				uni.showModal({
					title: '提示',
					content: '确定要删除浏览记录？',
					success: (res) => {
						if (res.confirm) {
							this.$util.request({
								url: '/mobile/index.php?act=member_goodsbrowse&op=del_bat',
								method: 'POST',
								data: {
									goods_ids: id
								}
							}).then(res => {
								if (res.datas == '1') {
									uni.showToast({
										title: '删除成功！'
									})
									this.goods_id = []
									this.getMark()
								}
							})
						}
					}
				})
			}
		}
	}
</script>

<style>
	.btn-box{
		width: 100%;
		background-color: #ffffff;
		display: flex;
		justify-content: flex-end;
	}
	.uni_right {
		background-color: #ffffff;
		padding-left: 80%;
		padding-top: 40rpx;
		text-align: center;
	}

	.status_bar {
		height: var(--status-bar-height);
		width: 100%;
		background-color: #FFFFFF;
	}

	.top_view {
		height: var(--status-bar-height);
		width: 100%;
		position: fixed;
		background-color: #FFFFFF;
		top: 0;
		z-index: 999;
	}

	.pading_right {
		padding-right: 70rpx;
	}

	.flex_center {
		display: flex;
		align-items: center;
	}

	.flex_center image {
		height: 35rpx;
		width: 28rpx;
	}

	.look {
		border: 1rpx solid #f0f0f0;
		border-radius: 40rpx;
		padding: 4rpx 20rpx;
		font-size: 24rpx;
		margin-right: 26rpx;
	}

	.shearp {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.flex {
		display: flex;
	}

	.bootom {
		position: fixed;
		bottom: 0;
		width: 100%;
		height: 100rpx;
		background-color: #FFFFFF;
		display: flex;
		align-items: center;
	}

	.bootom_left {
		border-top: 1px solid #F0F0F0;
		width: 60%;
		line-height: 100rpx;
		display: flex;
	}

	.bootom_right {
		background-color: #EE3338;
		color: #FFFFFF;
		width: 40%;
		line-height: 100rpx;
		text-align: center;
	}

	.car {
		height: 100%;
	}

	.box {
		background-color: #FFFFFF;
	}

	.top_box {
		display: flex;
		padding-left: 20rpx;
		border-bottom: 1px solid #F0F0F0;
	}

	.border-box {
		border-bottom: 1px solid #F0F0F0;
	}

	.left_box {
		padding: 20rpx 20rpx 20rpx 0;
		display: flex;
		align-items: center;
	}

	.top_left_image {
		height: 35rpx;
		width: 35rpx;
		margin: auto 20rpx;
	}

	.top_left_center {
		width: 200rpx;
		height: 200rpx;
	}

	.money {
		color: #F12E2E;
		font-weight: bold;
	}

	.item_left {
		width: 390rpx;
		height: 200rpx;
		padding-left: 40rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}

	.width {
		width: 470rpx !important;
	}

	.money>text {
		font-size: 38rpx;
	}

	.ellipsis {
		overflow: hidden;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		text-overflow: ellipsis;
	}

	.boder {
		/* border-top: 1px solid #F0F0F0; */
		padding-bottom: 20rpx;
		margin-left: 30%;
	}

	/* 	.border {
		border-bottom: 1rpx solid #F0F0F0;
		width: 450rpx;
		margin-left: 20rpx;
	} */

	.status_bar {
		height: var(--status-bar-height);
		width: 100%;
		background-color: #ffffff;
	}

	.top_view {
		height: var(--status-bar-height);
		width: 100%;
		position: fixed;
		background-color: #ffffff;
		/* background-color: #fca2a2;  */
		top: 0;
		z-index: 999;
	}

	.uni-navbar__header-btns-left {
		width: 180upx !important;
	}

	.None {
		height: 100%;
		background-color: #fff;
	}

	.nav-right {
		display: flex;
		width: 150rpx;
		padding-right: 30rpx;
		justify-content: flex-end;
	}
</style>